// # 登录对话框-显示
// 1 获取登录按钮
var loginBtn = document.querySelector('header .member > div')
// 2 绑定点击事件
loginBtn.onclick = function() {
    // 2 事件处理函数中 获取登录弹框
    var loginDialog = document.querySelector('section.login')
    // 2 事件处理函数中 直接显示
    loginDialog.style.visibility = 'visible'
}

// # 登录对话框-隐藏
// 1 获取登录对话框关闭按钮
var loginCloseBtn = document.querySelector('section.login i.icon-close')
// 2 绑定点击事件
loginCloseBtn.onclick = function() {
    // 3 事件处理函数中获取登录弹框
    var loginDialog = document.querySelector('section.login')
    // 4事件处理函数中直接隐藏
    loginDialog.style.visibility = 'hidden'
}

// # 登录对话框蓝色区域拖拽
// 1 获取蓝色区域
var loginBlueBox = document.querySelector('section.login .menu')
// 2 绑定鼠标按下事件
loginBlueBox.onmousedown = function(evt) 
{
    var oldE = evt || window.event
    // 3 事件处理函数中  给网页绑定鼠标移动事件 
    document.onmousemove = function(evt) 
    {
        // 4 获取事件对象
        var e = evt || window.event
        // 5获取鼠标位置
        var left = e.clientX - oldE.offsetX
        var top = e.clientY - oldE.offsetY
        // 6限制边界
        if (left<0) left = 0
        if (top<0) top = 0
        var loginDialog = document.querySelector('section.login .item')
        var maxLeft = (window.innerWidth || document.documentElement.clientWidth) - loginDialog.offsetWidth
        var maxTop = (window.innerHeight || document.documentElement.clientHeight) - loginDialog.offsetHeight
        if (left > maxLeft) left = maxLeft
        if (top > maxTop) top = maxTop
        // 7 设置行内样式
        loginDialog.style.position = 'absolute'
        loginDialog.style.left = left + 'px'
        loginDialog.style.top = top + 'px'
    }
    // 8事件处理函数中  给网页绑定鼠标松开事件 
    document.onmouseup = function() {
        document.onmousemove = null
    }
}



// # 登录倒计时
var num = 5
// 1 获取验证码按钮
var loginCaptchaBtn = document.querySelector('section.login .captcha')
// 2 绑定点击事件
loginCaptchaBtn.onclick = function() {

    // 3获取行为验证码对话框
    var captchaObj = document.querySelector('section.captcha')
    // 4显示
    captchaObj.style.visibility = 'visible'
    // 5获取关闭按钮绑定点击事件
    document.querySelector('section.captcha i.icon-close').onclick = function() {
        captchaObj.style.visibility = 'hidden'
    }
    // 6、获取球球绑定鼠标按下事件
    // var dragBtn = document.querySelector('section.captcha .drag .btn')
    var dragBtn = captchaObj.querySelector('.drag .btn')
    dragBtn.onmousedown = function() {
        // 7事件处理函数中  给网页绑定鼠标移动事件
        document.onmousemove = function(evt) {
            // 8获取事件对象
            var e = evt || window.event
            // 9获取鼠标位置 
            var left = e.clientX - (captchaObj.offsetLeft - captchaObj.offsetWidth/2) - dragBtn.offsetWidth
            // 10 限制边界
            // 11同步
            dragBtn.style.left = left + 'px'
            captchaObj.querySelector('.check img:nth-of-type(2)').style.left = left + 'px'
        }
        //  事件处理函数中 给网页绑定鼠标松开事件 
        document.onmouseup = function() {
            // 取消网页移动事件、
            document.onmousemove = null
            // 判断行为验证码结果
            // 1 获取数字
            var value = parseInt(dragBtn.style.left)
            // 2 判断 260 ~ 265 之间就倒计时 否则不管  
            if (value >= 260 && value<=265)
            {
                captchaObj.style.visibility = 'hidden'
                // 3事件处理函数中 - 将验证码按钮的文字改成5秒后重发
                loginCaptchaBtn.innerText = num+'秒后重发'
                loginCaptchaBtn.disabled =  true
                // 4 事件处理函数中 - a:定义全局变量,b:上一步使用全局变量,c:允许按钮点击,d:定时器继续重置&判断
                // 5定时器中
                t = setInterval(function() {
                    // 判断：a:清除定时器,b:页面重置,c:全局num终止,d:终止代码执行
                    if (num<=1) {
                        clearInterval(t)
                        loginCaptchaBtn.innerText = '重新发送'
                        num = 5
                        loginCaptchaBtn.disabled =  false
                        return
                    }
                    // 继续重置
                    num--
                    loginCaptchaBtn.innerText = num+'秒后重发'
                }, 1000)

            }
            // 3 不管成功失败都重置
            dragBtn.style.left =  '0px'
            captchaObj.querySelector('.check img:nth-of-type(2)').style.left =  '0px'
        }
    }
    return

}




// # 登录表单验证
// 1 获取【登录/注册】按钮
var loginSubmitBtn = document.querySelector('section.login .submit')
// 2 绑定点击事件
loginSubmitBtn.onclick = function() 
{
    var isOk = 0
    //3事件处理函数中 - 获取手机号判断
    var mobileObj = document.querySelector('.mobile')
    if (mobileObj.value == '' || mobileObj.value.length != 11 || !Number(mobileObj.value))
    {
        document.querySelector('section.login .form > p:nth-of-type(3)').innerText = '手机格式有误'
    } else {
        isOk++
        document.querySelector('section.login .form > p:nth-of-type(3)').innerText = ''
    }
    //4 事件处理函数中  获取验证码判断4位必须全部是数字
    var passwordObj = document.querySelector('.password')
    if (passwordObj.value == '' || passwordObj.value.length != 4 || !Number(passwordObj.value))
    {
        document.querySelector('section.login .form > p:nth-of-type(4)').innerText = '验证码只能是4位村数字'
    } else {
        isOk++
        document.querySelector('section.login .form > p:nth-of-type(4)').innerText = ''
    }
    // 5都验证成功 - 弹框表单提交中...
    if (isOk==2) {
        alert('登录成功')
    }
}